import "@animxyz/core";

import BackgroundImg from "@assets/bg01.jpg";
import CustomizedButton from "@assets/customized_button.png";
import Fireworks1 from "@assets/fireworks_1.png";
import Fireworks2 from "@assets/fireworks_2.png";
import HomeRmk from "@assets/home_rmk.png";
import Lantern from "@assets/lantern.png";
import Slogan from "@assets/slogan.png";
import BaseBackground from "@plugin/BaseBackground";
import EnhanceUseNavigate from "@plugin/EnhanceUseNavigate";
import React, { Component } from "react";
import { Toast } from "react-vant";
import { CampaignIds } from "../../../utils/ha.common";
import styles from "./index.module.scss";

const LanternBackground = (props) => {
	return (
		<div className={styles.lantern_background}>
			<img src={Lantern} className={styles.lantern} alt="" />
			<img src={Fireworks1} className={styles.fireworks1} alt="" />
			<img src={Fireworks2} className={styles.fireworks2} alt="" />
			{props.children}
		</div>
	);
};
class Index extends Component {
	constructor(props) {
		super(props);

		this.state = {
			showFlag: true,
		};
	}

	componentDidMount() {
		window._ha("send", "action", "cny_activity1_homepage_view", {
			campaign_id: CampaignIds.activity1,
			channel: localStorage.getItem("channel"),
		});
	}

	render() {
		const { showFlag } = this.state;
		return (
			<BaseBackground
				backgroundImage={BackgroundImg}
				showFlag={showFlag}
				bigLogo={true}
			>
				<LanternBackground>
					{/* <XyzTransitionGroup appear appearVisible xyz="fade up-1"> */}
					<div
						className={styles.header_box}
						style={{
							"--xyz-delay": ".5s",
						}}
					>
						<div className={styles.slogan_box}>
							<img src={Slogan} className={styles.slogan} alt="" />
							<img src={HomeRmk} className={styles.home_rmk} alt="" />
						</div>
					</div>

					<div className={styles.dragon} />
					{/* </XyzTransitionGroup> */}
					<img
						onClick={() => {
							return Toast({
								message: "活动已结束",
								position: "top",
								duration: 0,
							});

							// this.props.navigate("/activity_create_2");

							// setTimeout(() => {
							// 	window._ha(
							// 		"send",
							// 		"action",
							// 		"cny_activity1_homepage_blessingtype_click",
							// 		{
							// 			campaign_id: CampaignIds.activity1,
							// 			channel: localStorage.getItem("channel"),
							// 		}
							// 	);
							// }, 0);
						}}
						src={CustomizedButton}
						className={`${styles.customized_button} zoom-animated`}
						alt=""
					/>
				</LanternBackground>
			</BaseBackground>
		);
	}
}

export default EnhanceUseNavigate(Index);
